<template>
    <div id="Swipers" class="swiper-center-big" v-if="">
        <swiper :options="swiperOption" ref="mySwiper" v-show="SwiperContent.cycleImgs && SwiperContent.cycleImgs.length > 0">
            <swiper-slide  v-for="(cycleImg,index) in SwiperContent.cycleImgs" :key="index" >
                <div class="swiper-slide">
                    <div class="img-wrap">
                        <img v-if="isFullUrl" class="width-full booking-item-top-img" :src="cycleImg"/>
                        <img v-if="!isFullUrl" class="width-full booking-item-top-img" :src="systemImgServerCommon(cycleImg)"/>
                    </div>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
    import  { swiper, swiperSlide }   from 'vue-awesome-swiper'

    export default {
        name: 'SwiperCenterBig',
        props: {
            // SwiperContent: {
            //     type: Object
            // },
            isFullUrl:{
                type:Boolean
            }
        },
        data() {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationType: 'bullets',
                    direction: 'horizontal',
                    observer: true,
                    observeParents: true,
                    speed:500,
//                    autoplayDisableOnInteraction:false,
                    autoplay: 100000,
                    effect : 'coverflow',
                    slidesPerView: 1.4,
                    centeredSlides: true,
                    // spaceBetween : 50,
                    coverflow: {
                        rotate: 0,
                        stretch: 0,
                        depth: 500,
                        modifier: 2,
                        slideShadows : false
                    }
                },
                SwiperContent:{
                    cycleImgs:['item/2018118_offline/527685973100.jpg','item/2018118_offline/527685973100.jpg','item/2018118_offline/527685973100.jpg']
                }
            }
        },
        created(){
            if(this.SwiperContent.cycleImgs && this.SwiperContent.cycleImgs.length > 1){
                this.swiperOption.loop = true;
            }
        },
        components: {
            swiper,
            swiperSlide,
        },
        mounted(){
            // 初始化轮播图
            this.swiper.slideTo(1, 3000, false)
            // 开始自动播放
            this.swiper.startAutoplay()

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        watch:{
            SwiperContent:function (val) {
                if(Object.keys(val).length){
                    if(this.SwiperContent.cycleImgs.length > 1){
                        this.swiperOption.loop = true;
                    }
                }
            }
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        transition: all .5s;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-color: #fff;
        }
    }
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        overflow: hidden;
        .img-wrap{
            transition: all .5s;
            background-color: #fff;
            width: 1.5rem;
            height: 2.08rem;
            display: block;
            left: 0;
            right: 0;
            margin: auto;
            img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                border-radius: 3px;
            }
        }
    }
    .swiper-slide-active{
        .img-wrap{
            width: 1.8rem;
            height: 2.3rem;
        }
    }
    .swiper-center-big{
        width: 3.55rem;
        height: 2.6rem;
        display: block;
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #fff;
    }
    .swiper-container{
        padding-top: .15rem;
        height: 2.6rem;
    }
</style>